<template>
  <div>
    <el-image class="logo" :src="url"></el-image>
    <div style="float:right;color:#666;">
      <el-divider direction="vertical"></el-divider>
      <span>
        <el-dropdown>
          <span class="el-dropdown-link">
            <span class="admin">Welcome 系统管理员</span>
            <i class="el-icon-caret-bottom el-icon-caret-top" style="float:right;margin-top:22px;"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: require("@/assets/logo.png")
    };
  }
};
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.logo {
  width: 50px;
  height: 50px;
  float: left;
  margin-top: 5px;
}
.el-divider--vertical {
  float: left;
  margin-top: 0.875rem;
  height: 2em;
  background-color: #b2aeae;
}
.admin {
  width: 70px;
  display: inline-block;
  padding-top: 10px;
  line-height: 20px;
  word-wrap: break-word;
}
</style>
